<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
          name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <title>Document</title>
    <link href="../boot/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>


基本面板 <br>
<div class="panel panel-default">
    <!--内容-->
    <div class="panel-body">
        spring is good a ...
    </div>
</div>

带有标题面板 <br>
<div class="panel panel-default">
    <!--标题 -->
    <div class="panel-heading">
        用户管理
    </div>
    <!--内容-->
    <div class="panel-body">
        用户列表
    </div>
</div>

带有标题面板并在内容中设置列表组 <br>
<div class="panel panel-default">
    <div class="panel-heading">用户管理</div>
    <div class="panel-body">
        <ul class="list-group">
            <li class="list-group-item">Springmvc</li>
            <li class="list-group-item">SpringBoot</li>
            <li class="list-group-item">SpringData</li>
        </ul>
    </div>
</div>

带有标题 内容 脚的面板 <br>
<div class="panel panel-default">
    <div class="panel-heading">用户管理</div>
    <div class="panel-body">
        <ul class="list-group">
            <li class="list-group-item">Springmvc</li>
            <li class="list-group-item">SpringBoot</li>
            <li class="list-group-item">SpringData</li>
        </ul>
    </div>
    <div class="panel-footer">
        这是是脚的内容
    </div>
</div>

面板情景效果 <br>
<div class="panel panel-info">
    <div class="panel-heading">用户管理</div>
    <div class="panel-body">
        <ul class="list-group">
            <li class="list-group-item">Springmvc</li>
            <li class="list-group-item">SpringBoot</li>
            <li class="list-group-item">SpringData</li>
        </ul>
    </div>
    <div class="panel-footer">
        这是是脚的内容
    </div>
</div>

带有表格面板 <br>
<div class="panel panel-info">
    <div class="panel-heading">用户管理</div>
    <div class="panel-body">
        <table class="table table-bordered table-striped">
            <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>生日</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>23</td>
                <td>2012-12-12</td>
                <td><a class="btn btn-primary" href="">修改</a> <a class="btn btn-danger" href="">删除</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>23</td>
                <td>2012-12-12</td>
                <td><a class="btn btn-primary" href="">修改</a> <a class="btn btn-danger" href="">删除</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>23</td>
                <td>2012-12-12</td>
                <td><a class="btn btn-primary" href="">修改</a> <a class="btn btn-danger" href="">删除</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>23</td>
                <td>2012-12-12</td>
                <td><a class="btn btn-primary" href="">修改</a> <a class="btn btn-danger" href="">删除</a></td>
            </tr>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>23</td>
                <td>2012-12-12</td>
                <td><a class="btn btn-primary" href="">修改</a> <a class="btn btn-danger" href="">删除</a></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="panel-footer">
        这是是脚的内容
    </div>
</div>
</body>
</html>